<div class="deployment-tile" ng-if="pod.kind === 'Pod'">
  <div row class="service-title" ng-if="service">
    <div>
      Service:
      <a ng-href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a>
    </div>
    <div ng-if="weightByService[service.metadata.name]" class="service-metadata">
      <ng-include src="'views/overview/_traffic-percent.html'"></ng-include>
    </div>
  </div>  
  <div class="rc-header"> <!-- TODO may want different treatment for a pod-name? -->
    <div>
      Pod:
      <a ng-href="{{pod | navigateResourceURL}}">{{pod.metadata.name}}</a>
    </div>
    <div>
      <relative-timestamp timestamp="pod.metadata.creationTimestamp"></relative-timestamp>
    </div>
  </div>
  <div row class="deployment-body">
    <div column class="overview-donut">
      <pod-donut
          pods="[pod]"
          class="clickable"
          ng-click="viewPod()">
      </pod-donut>
      <!-- Add a link for screen readers. -->
      <a href=""
         class="sr-only"
         ng-click="viewPod()"
         role="button">
         View pod
      </a>
    </div>
    <div column class="deployment-details">
      <metrics ng-if="showMetrics && !collapse" pod="pod" profile="compact" class="overview-metrics"></metrics>
      <pod-template ng-if="!showMetrics" pod-template="pod"></pod-template>
    </div>
  </div>
</div>
